<template>
  <div class="empty-state">
    <div class="empty-icon">
      <n-icon :size="iconSize" :color="iconColor">
        <svg v-if="type === 'no-data'" xmlns="http://www.w3.org/2000/svg" width="64" height="64" viewBox="0 0 24 24">
          <path fill="currentColor" d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10s10-4.48 10-10S17.52 2 12 2zM13 17h-2v-6h2v6zm0-8h-2V7h2v2z"/>
        </svg>
        <svg v-else-if="type === 'no-search'" xmlns="http://www.w3.org/2000/svg" width="64" height="64" viewBox="0 0 24 24">
          <path fill="currentColor" d="M15.5 14h-.79l-.28-.27A6.471 6.471 0 0 0 16 9.5A6.5 6.5 0 1 0 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5S14 7.01 14 9.5S11.99 14 9.5 14z"/>
        </svg>
        <svg v-else-if="type === 'error'" xmlns="http://www.w3.org/2000/svg" width="64" height="64" viewBox="0 0 24 24">
          <path fill="currentColor" d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10s10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5l1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"/>
        </svg>
        <svg v-else xmlns="http://www.w3.org/2000/svg" width="64" height="64" viewBox="0 0 24 24">
          <path fill="currentColor" d="M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zM9 17H7v-7h2v7zm4 0h-2V7h2v10zm4 0h-2v-4h2v4z"/>
        </svg>
      </n-icon>
    </div>
    
    <div class="empty-content">
      <h3 class="empty-title">{{ title }}</h3>
      <p class="empty-description">{{ description }}</p>
      
      <div v-if="showAction" class="empty-actions">
        <n-button 
          v-if="actionText" 
          :type="actionType" 
          @click="handleAction"
        >
          {{ actionText }}
        </n-button>
        <slot name="actions"></slot>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { computed } from 'vue'

interface Props {
  type?: 'no-data' | 'no-search' | 'error' | 'default'
  title?: string
  description?: string
  actionText?: string
  actionType?: 'primary' | 'default' | 'tertiary'
  showAction?: boolean
  iconSize?: number
}

interface Emits {
  (e: 'action'): void
}

const props = withDefaults(defineProps<Props>(), {
  type: 'no-data',
  title: '',
  description: '',
  actionText: '',
  actionType: 'primary',
  showAction: true,
  iconSize: 64
})

const emit = defineEmits<Emits>()

// 计算属性
const iconColor = computed(() => {
  switch (props.type) {
    case 'error':
      return '#d03050'
    case 'no-search':
      return '#409eff'
    default:
      return 'var(--n-text-color-3)'
  }
})

const computedTitle = computed(() => {
  if (props.title) return props.title
  
  switch (props.type) {
    case 'no-data':
      return '暂无数据'
    case 'no-search':
      return '未找到相关内容'
    case 'error':
      return '出现错误'
    default:
      return '暂无内容'
  }
})

const computedDescription = computed(() => {
  if (props.description) return props.description
  
  switch (props.type) {
    case 'no-data':
      return '当前没有可显示的数据'
    case 'no-search':
      return '请尝试调整搜索条件或筛选器'
    case 'error':
      return '请稍后重试或联系管理员'
    default:
      return '暂时没有内容可显示'
  }
})

// 方法
const handleAction = () => {
  emit('action')
}
</script>

<style scoped>
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px 20px;
  text-align: center;
  min-height: 200px;
}

.empty-icon {
  margin-bottom: 24px;
  opacity: 0.6;
}

.empty-content {
  max-width: 400px;
}

.empty-title {
  font-size: 18px;
  font-weight: 500;
  color: var(--n-text-color-1);
  margin: 0 0 8px 0;
}

.empty-description {
  font-size: 14px;
  color: var(--n-text-color-2);
  margin: 0 0 24px 0;
  line-height: 1.5;
}

.empty-actions {
  display: flex;
  justify-content: center;
  gap: 12px;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .empty-state {
    padding: 30px 16px;
    min-height: 150px;
  }
  
  .empty-title {
    font-size: 16px;
  }
  
  .empty-description {
    font-size: 13px;
  }
}
</style>
